<template>
	<view class="container">
		<!-- 🔧 认证加载界面 -->
		<view v-if="isAuthLoading" class="auth-loading-container">
			<view class="loading-content">
				<view class="loading-icon-auth">
					<u-loading-icon mode="spinner" size="60" color="#2979ff"></u-loading-icon>
				</view>
				<text class="loading-title">正在验证身份</text>
				<text class="loading-subtitle">{{ isAuthenticated ? '正在加载问卷信息...' : '正在跳转到企业微信授权...' }}</text>
			</view>
			<view class="loading-footer">
				<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>
		</view>
		
		<!-- 🔧 主要内容区域 - 只有认证成功才显示 -->
		<view v-else>
			<u-transition 
				mode="zoom" 
				:show="showTransition" 
				:duration="300" 
				:custom-style="{marginBottom: '30rpx'}"
			>
				<view class="header">
					<text class="title">{{ surveyInfo.title || '培训问卷调查' }}</text>
					<text class="subtitle">{{ surveyInfo.description || '请填写以下问卷完成培训' }}</text>
				</view>
			</u-transition>
		
		<u-transition 
			mode="slide-down" 
			:show="showTransition" 
			:duration="300" 
			:custom-style="{marginBottom: '30rpx'}"
		>
			<view class="training-info-card">
				<view class="training-title">
					<text>{{trainingInfo.title}}</text>
				</view>
				<view class="training-details">
					<view class="detail-item">
						<view class="detail-icon time-icon"></view>
						<text class="detail-text">{{trainingInfo.time}}</text>
					</view>
					<view class="detail-item">
						<view class="detail-icon location-icon"></view>
						<text class="detail-text">{{trainingInfo.location}}</text>
					</view>
					<view class="detail-item">
						<view class="detail-icon code-icon"></view>
						<text class="detail-text">编号: {{trainingInfo.code}}</text>
					</view>
				</view>
			</view>
		</u-transition>
		
		<!-- 问卷问题卡片 -->
		<u-transition 
			mode="fade-up" 
			:show="showTransition" 
			:duration="400" 
			:custom-style="{marginBottom: '30rpx'}"
			v-for="(question, qIndex) in questions"
			:key="qIndex"
		>
			<view class="question-card">
				<view class="question-title">
					<text>{{qIndex + 1}}. {{question.title}}</text>
					<text class="question-required" v-if="question.required">*</text>
				</view>
				
				<!-- 单选题 -->
				<view class="question-options" v-if="question.type === 'radio'">
					<view 
						class="option-item"
						v-for="(option, oIndex) in question.options" 
						:key="oIndex"
						@click="selectOption(qIndex, oIndex, 'radio')"
					>
						<view class="radio-button" :class="{ 'active': question.answer === oIndex }">
							<view class="radio-inner" v-if="question.answer === oIndex"></view>
						</view>
						<text class="option-text">{{option.content || option}}</text>
					</view>
				</view>
				
				<!-- 多选题 -->
				<view class="question-options" v-if="question.type === 'checkbox'">
					<view 
						class="option-item"
						v-for="(option, oIndex) in question.options" 
						:key="oIndex"
						@click="selectOption(qIndex, oIndex, 'checkbox')"
					>
						<view class="checkbox-button" :class="{ 'active': question.answer && question.answer.includes(oIndex) }">
							<text class="checkbox-inner" v-if="question.answer && question.answer.includes(oIndex)">✓</text>
						</view>
						<text class="option-text">{{option.content || option}}</text>
					</view>
				</view>
				
				<!-- 问答题 -->
				<view class="question-textarea" v-if="question.type === 'textarea' || question.type === 'text'">
					<u-textarea
						v-model="question.answer"
						placeholder="请输入您的回答..."
						height="160"
						count
						maxlength="200"
						:custom-style="{
							backgroundColor: '#f8f9fc',
							padding: '20rpx',
							borderRadius: '12rpx'
						}"
					></u-textarea>
				</view>
				
				<!-- 评分题 -->
				<view class="question-rating" v-if="question.type === 'rating'">
					<view class="star-container">
						<view 
							class="star" 
							v-for="(item, sIndex) in 5" 
							:key="sIndex"
							:class="{ 'active': question.answer !== undefined && sIndex < question.answer }"
							@click="selectOption(qIndex, sIndex + 1, 'rating')"
						>
							<text class="star-icon">★</text>
						</view>
					</view>
					<view class="rating-text" v-if="question.answer">
						<text>{{ ratingTexts[question.answer] }}</text>
					</view>
				</view>
			</view>
		</u-transition>
		
		<u-transition 
			mode="fade-up" 
			:show="showTransition" 
			:duration="600"
		>
			<view class="submit-button" @click="submitSurvey" :class="{'button-disabled': !canSubmit}">
				<text>提交问卷</text>
			</view>
		</u-transition>
		
			<view class="footer">
				<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import authMixin from '@/mixins/authMixin.js';
	
	export default {
		name: 'TrainingSurvey',
		mixins: [authMixin],
		data() {
			return {
				showTransition: false,
				isAuthLoading: true, // 🎯 认证加载状态
				isDataLoading: true, // 🎯 数据加载状态
				trainingInfo: {
					title: '',
					time: '',
					location: '',
					code: ''
				},
				surveyInfo: {
					title: '',
					description: ''
				},
				ratingTexts: [
					'', // 占位，索引0不使用
					'非常不满意',
					'不满意',
					'一般',
					'满意',
					'非常满意'
				],
				// 问卷问题列表 - 将从API动态加载
				questions: [],
				// 传入的参数
				teachId: 0,
				surveyId: 0,
				fromSignout: false, // 是否来自签退页面
				// 默认问题（作为备用）
				defaultQuestions: [
					{
						title: '您对本次培训的整体满意度是？',
						type: 'rating',
						required: true,
						answer: undefined
					},
					{
						title: '您认为本次培训中最有价值的内容是？',
						type: 'radio',
						required: true,
						options: [
							'数字化转型战略规划',
							'业务流程优化方法',
							'技术实施案例分析',
							'变革管理与组织调整'
						],
						answer: undefined
					},
					{
						title: '您通过本次培训获得了哪些收获？（可多选）',
						type: 'checkbox',
						required: true,
						options: [
							'扩展了数字化转型相关知识',
							'了解了行业最新发展动态',
							'掌握了实用的工作方法',
							'结识了行业内的专业人士',
							'获得了可实施的解决方案'
						],
						answer: []
					},
					{
						title: '对于培训内容，您有什么建议或期望？',
						type: 'textarea',
						required: false,
						answer: ''
					}
				]
			}
		},
		computed: {
			// 🎯 获取认证状态
			...mapGetters([
				'isAuthenticated'
			]),
			// 检查是否可以提交
			canSubmit() {
				// 检查所有必填问题是否已回答
				let canSubmit = true;
				this.questions.forEach(question => {
					if (question.required) {
						if (question.type === 'radio' || question.type === 'rating') {
							if (question.answer === undefined) {
								canSubmit = false;
							}
						} else if (question.type === 'checkbox') {
							if (!question.answer || question.answer.length === 0) {
								canSubmit = false;
							}
						} else if (question.type === 'textarea' || question.type === 'text') {
							if (!question.answer || question.answer.trim() === '') {
								canSubmit = false;
							}
						}
					}
				});
				return canSubmit;
			}
		},
		async onLoad(options) {
			// 🔧 检查URL参数，如果有code参数，说明是从企业微信授权返回
			const urlParams = new URLSearchParams(window.location.search);
			const code = urlParams.get('code');
			
			console.log("🔍 问卷页面加载，开始认证检查...");
			console.log("🔍 问卷页面参数:", options);
			console.log("🔍 URL参数检查:", {
				search: window.location.search,
				code: code,
				hasCode: !!code
			});
			
			// 🎯 如果有code参数，设置特殊标志
			if (code) {
				console.log("🔐 检测到授权码，进行登录验证");
			}
			
			console.log("🔍 当前认证状态:", {
				isAuthenticated: this.isAuthenticated,
				userid: this.userid,
				empname: this.empname,
				orgname: this.orgname
			});
			
			// 🎯 使用页面认证检查，能够处理微信授权码
			await this.performPageAuth(async () => {
				console.log("✅ 问卷页面认证成功");
				
				// 认证成功 - 关闭认证加载状态，初始化页面
				this.isAuthLoading = false;
				
				// 延迟显示动画，提高性能
				setTimeout(() => {
					this.showTransition = true;
				}, 100);
				
				// 获取传入的参数
				if (options.teach_id) {
					this.teachId = parseInt(options.teach_id);
				}
				if (options.survey_id) {
					this.surveyId = parseInt(options.survey_id);
				}
				// 检查是否来自签退页面
				if (options.from_signout === 'true') {
					this.fromSignout = true;
				}
				
				// 如果有必要的参数，则加载问卷数据
				if (this.teachId && this.surveyId) {
					await this.loadSurveyData();
				} else {
					console.warn("缺少必要参数 teach_id 或 survey_id");
					this.isDataLoading = false;
					// 使用默认数据
					this.questions = this.defaultQuestions;
					// 设置默认的培训信息
					this.trainingInfo = {
						title: '数字化转型培训',
						time: this.formatTime('2025-01-15 09:00:00', '2025-01-15 17:00:00'),
						location: '培训中心',
						code: 'DEMO001'
					};
				}
			}, () => {
				console.log("❌ 问卷页面认证失败，将跳转认证");
				// 认证失败时保持loading状态，用户会被跳转
			})
		},
		
		onShow() {
			console.log("🔍 问卷页面onShow，检查是否需要重新认证...");
			
			// 🎯 检查认证状态，如果未认证且不在加载状态，重新认证
			if (!this.isAuthenticated && !this.isAuthLoading) {
				console.log("🔒 用户未认证，重新进行认证检查");
				this.performPageAuth(() => {
					console.log("✅ 重新认证成功");
					this.isAuthLoading = false;
					setTimeout(() => {
						this.showTransition = true;
					}, 100);
				}, () => {
					console.log("❌ 重新认证失败");
				});
			} else if (this.isAuthenticated && this.isAuthLoading) {
				console.log("🔒 认证正在进行中，跳过重复认证");
			} else {
				console.log("✅ 用户已认证，无需重新认证");
			}
		},
		
		methods: {
			// 格式化时间显示
			formatTime(startTime, endTime) {
				if (!startTime && !endTime) {
					return '时间待定';
				}
				
				// 支持多种时间格式的转换
				const formatDateTime = (dateTimeInput) => {
					if (!dateTimeInput) return '';
					
					try {
						let date;
						
						// 处理不同的时间格式
						if (typeof dateTimeInput === 'number') {
							// Unix时间戳 (秒)
							date = new Date(dateTimeInput * 1000);
						} else if (typeof dateTimeInput === 'string') {
							// 检查是否是纯数字字符串 (时间戳)
							const timestamp = parseInt(dateTimeInput);
							if (!isNaN(timestamp) && dateTimeInput.length >= 10) {
								// 判断是秒级时间戳还是毫秒级时间戳
								if (dateTimeInput.length === 10) {
									// 10位数字，秒级时间戳
									date = new Date(timestamp * 1000);
								} else {
									// 13位数字，毫秒级时间戳
									date = new Date(timestamp);
								}
							} else {
								// 字符串格式的日期时间
								date = new Date(dateTimeInput);
							}
						} else {
							// 其他格式直接尝试转换
							date = new Date(dateTimeInput);
						}
						
						if (isNaN(date.getTime())) {
							// 如果无法解析为日期，直接返回原始字符串
							return String(dateTimeInput);
						}
						
						const year = date.getFullYear();
						const month = String(date.getMonth() + 1).padStart(2, '0');
						const day = String(date.getDate()).padStart(2, '0');
						const hours = String(date.getHours()).padStart(2, '0');
						const minutes = String(date.getMinutes()).padStart(2, '0');
						
						return `${year}-${month}-${day} ${hours}:${minutes}`;
					} catch (error) {
						// 解析失败时返回原始字符串
						return String(dateTimeInput);
					}
				};
				
				const formattedStart = formatDateTime(startTime);
				const formattedEnd = formatDateTime(endTime);
				
				if (formattedStart && formattedEnd) {
					// 解析开始和结束时间
					const startParts = formattedStart.split(' ');
					const endParts = formattedEnd.split(' ');
					const startDate = startParts[0];
					const endDate = endParts[0];
					const startTimeOnly = startParts[1];
					const endTimeOnly = endParts[1];
					
					if (startDate === endDate) {
						// 同一天：2025-01-15 09:00 - 17:00
						return `${startDate} ${startTimeOnly} - ${endTimeOnly}`;
					} else {
						// 跨天培训：优化显示格式
						const startDateObj = new Date(startDate);
						const endDateObj = new Date(endDate);
						const timeDiff = Math.abs(endDateObj - startDateObj);
						const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
						
						if (daysDiff === 1) {
							// 连续两天：01-15 09:00 - 01-16 17:00
							const startMonth = startDate.substring(5, 10); // MM-DD
							const endMonth = endDate.substring(5, 10);     // MM-DD
							return `${startMonth} ${startTimeOnly} - ${endMonth} ${endTimeOnly}`;
						} else if (daysDiff <= 7) {
							// 一周内：01-15 - 01-20 (09:00-17:00)
							const startMonth = startDate.substring(5, 10);
							const endMonth = endDate.substring(5, 10);
							return `${startMonth} - ${endMonth} (${startTimeOnly}-${endTimeOnly})`;
						} else {
							// 长期培训：2025-01-15 - 2025-02-15
							return `${startDate} - ${endDate}`;
						}
					}
				} else if (formattedStart) {
					return `${formattedStart} 开始`;
				} else if (formattedEnd) {
					return `截止 ${formattedEnd}`;
				}
				
				return '时间待定';
			},
			
			// 加载问卷数据
			async loadSurveyData() {
				try {
					console.log("🔍 开始加载问卷数据，teach_id:", this.teachId, "survey_id:", this.surveyId);
					this.isDataLoading = true;
					
					const apiUrl = this.$store.getters.getApiUrl('v2');
					const response = await uni.request({
						url: `${apiUrl}/survey`,
						method: 'GET',
						data: {
							teach_id: this.teachId,
							survey_id: this.surveyId,
							userid: this.userid
						}
					});
					
					console.log("📥 问卷数据响应:", response.data);
					
					if (response.data.status === 1 && response.data.data) {
						const data = response.data.data;
						
						// 设置培训信息
						if (data.teach_info) {
							this.trainingInfo = {
								title: data.teach_info.teach_name || '',
								time: this.formatTime(data.teach_info.start_time, data.teach_info.end_time),
								location: data.teach_info.teach_address || '',
								code: data.teach_info.number || ''
							};
						}
						
						// 设置问卷信息
						if (data.survey_info) {
							this.surveyInfo = {
								title: data.survey_info.title || '',
								description: data.survey_info.description || ''
							};
							
							// 设置问题列表
							if (data.survey_info.questions && data.survey_info.questions.length > 0) {
								this.questions = data.survey_info.questions.map(q => ({
									id: q.id,
									title: q.title,
									type: q.type,
									required: q.required,
									options: q.options ? q.options : [], // 保存完整的选项对象（包含id和content）
									optionTexts: q.options ? q.options.map(opt => opt.content) : [], // 用于显示的选项文本
									answer: q.type === 'checkbox' ? [] : undefined
								}));
							} else {
								// 如果没有问题，使用默认问题
								this.questions = this.defaultQuestions;
							}
						}
						
						console.log("✅ 问卷数据加载成功");
					} else {
						console.error("❌ 问卷数据加载失败:", response.data.message);
						uni.showToast({
							title: response.data.message || '加载问卷数据失败',
							icon: 'none'
						});
						// 使用默认数据
						this.questions = this.defaultQuestions;
					}
				} catch (error) {
					console.error("❌ 请求问卷数据失败:", error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
					// 使用默认数据
					this.questions = this.defaultQuestions;
				} finally {
					this.isDataLoading = false;
				}
			},
			
			// 选择选项
			selectOption(questionIndex, optionIndex, type) {
				if (type === 'radio' || type === 'rating') {
					this.questions[questionIndex].answer = optionIndex;
				} else if (type === 'checkbox') {
					if (!this.questions[questionIndex].answer) {
						this.questions[questionIndex].answer = [];
					}
					
					const index = this.questions[questionIndex].answer.indexOf(optionIndex);
					if (index === -1) {
						// 添加选项
						this.questions[questionIndex].answer.push(optionIndex);
					} else {
						// 移除选项
						this.questions[questionIndex].answer.splice(index, 1);
					}
				}
			},
			
			// 提交问卷
			async submitSurvey() {
				if (!this.canSubmit) {
					uni.showToast({
						title: '请完成所有必填问题',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				
				try {
					// 准备提交数据
					const submitData = {
						survey_id: this.surveyId,
						teach_id: this.teachId,
						user_id: this.userid,
						user_name: this.empname,
						answers: this.formatAnswersForSubmit()
					};
					
					console.log("📤 提交问卷数据:", submitData);
					
					const apiUrl = this.$store.getters.getApiUrl('v2');
					const response = await uni.request({
						url: `${apiUrl}/survey/submit`,
						method: 'POST',
						data: submitData,
						header: {
							'Content-Type': 'application/json'
						}
					});
					
					console.log("📥 提交响应:", response.data);
					
					// 关闭加载提示
					uni.hideLoading();
					
					if (response.data.status === 1) {
						// 提交成功 - 显示成功提示
						uni.showToast({
							title: '问卷提交成功！',
							icon: 'success',
							duration: 2000,
							mask: true
						});
						
						// 延迟跳转到成功页面
						setTimeout(() => {
							if (this.fromSignout) {
								// 如果是从签退页面来的，跳转到成功页面并显示签退状态
								uni.navigateTo({
									url: `/pages/dtest/success?teach_id=${this.teachId}&action=signout&from_survey=true&title=` + 
										encodeURIComponent(this.trainingInfo.title) + 
										'&location=' + encodeURIComponent(this.trainingInfo.location) + 
										'&code=' + encodeURIComponent(this.trainingInfo.code)
								});
							} else {
								// 正常的问卷完成跳转
								uni.navigateTo({
									url: '/pages/dtest/success?title=' + encodeURIComponent(this.trainingInfo.title) + 
										'&location=' + encodeURIComponent(this.trainingInfo.location) + 
										'&code=' + encodeURIComponent(this.trainingInfo.code)
								});
							}
						}, 2000); // 延长等待时间，让用户看到成功提示
					} else {
						// 提交失败
						uni.showToast({
							title: response.data.msg || '提交失败，请重试',
							icon: 'error',
							duration: 2000,
							mask: true
						});
					}
				} catch (error) {
					console.error("❌ 提交问卷失败:", error);
					uni.hideLoading();
					
					uni.showToast({
						title: '网络错误，请检查网络连接',
						icon: 'error',
						duration: 2000,
						mask: true
					});
				}
			},
			
			// 格式化答案数据用于提交
			formatAnswersForSubmit() {
				const answers = [];
				
				this.questions.forEach((question, questionIndex) => {
					if (question.answer !== undefined && question.answer !== null && question.answer !== '') {
						const answerData = {
							question_index: questionIndex, // 问题索引
							question_id: question.id, // 问题ID（后端需要）
							question_title: question.title,
							question_type: question.type,
							answer: null,
							option_ids: [],
							rating_value: null,
							text_answer: null
						};
						
						switch (question.type) {
							case 'radio':
								// 单选题：answer是选项索引，需要转换为选项ID
								if (question.options && question.options[question.answer]) {
									answerData.option_ids = [question.options[question.answer].id];
									answerData.answer = question.options[question.answer].content;
								}
								break;
								
							case 'checkbox':
								// 多选题：answer是选项索引数组，需要转换为选项ID数组
								if (question.options && question.answer && question.answer.length > 0) {
									answerData.option_ids = question.answer.map(index => {
										return question.options[index] ? question.options[index].id : null;
									}).filter(id => id !== null);
									answerData.answer = question.answer.map(index => {
										return question.options[index] ? question.options[index].content : '';
									}).filter(content => content !== '');
								}
								break;
								
							case 'rating':
								// 评分题：answer是评分值
								answerData.rating_value = question.answer;
								answerData.answer = `${question.answer}分 - ${this.ratingTexts[question.answer]}`;
								break;
								
							case 'textarea':
							case 'text':
								// 文本题：answer是文本内容
								answerData.text_answer = question.answer;
								answerData.answer = question.answer;
								break;
						}
						
						answers.push(answerData);
					}
				});
				
				return answers;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}
	
	.header {
		padding: 60rpx 20rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 46rpx;
		font-weight: bold;
		color: #303133;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #909399;
		display: block;
	}
	
	.training-info-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}
	
	.training-title {
		margin-bottom: 24rpx;
	}
	
	.training-title text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 1.4;
	}
	
	.training-details {
		display: flex;
		flex-direction: column;
	}
	
	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.detail-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
		position: relative;
	}
	
	.time-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border: 2px solid #ff9900;
		border-radius: 50%;
		top: 2rpx;
		left: 2rpx;
	}
	
	.time-icon::after {
		content: '';
		position: absolute;
		width: 8rpx;
		height: 2rpx;
		background: #ff9900;
		top: 14rpx;
		left: 14rpx;
		transform: rotate(45deg);
		box-shadow: 0 -8rpx 0 #ff9900;
	}
	
	.location-icon::before {
		content: '';
		position: absolute;
		width: 22rpx;
		height: 22rpx;
		border: 2px solid #f56c6c;
		border-radius: 50% 50% 50% 0;
		transform: rotate(-45deg);
		top: 2rpx;
		left: 4rpx;
	}
	
	.location-icon::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: 6rpx;
		background: #ffffff;
		border-radius: 50%;
		top: 10rpx;
		left: 12rpx;
	}
	
	.code-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 18rpx;
		border: 2px solid #2979ff;
		border-radius: 2rpx;
		top: 6rpx;
		left: 2rpx;
	}
	
	.code-icon::after {
		content: '';
		position: absolute;
		width: 16rpx;
		height: 2rpx;
		background: #2979ff;
		top: 12rpx;
		left: 6rpx;
		box-shadow: 0 5rpx 0 #2979ff, 0 10rpx 0 #2979ff;
	}
	
	.detail-text {
		font-size: 28rpx;
		color: #606266;
		line-height: 1.4;
	}
	
	/* 问卷题目卡片样式 */
	.question-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}
	
	.question-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 30rpx;
		line-height: 1.4;
	}
	
	.question-required {
		color: #f56c6c;
		margin-left: 8rpx;
	}
	
	/* 选项样式 */
	.question-options {
		display: flex;
		flex-direction: column;
	}
	
	.option-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		padding: 10rpx 0;
	}
	
	.option-text {
		font-size: 28rpx;
		color: #606266;
		margin-left: 16rpx;
	}
	
	/* 单选按钮样式 */
	.radio-button {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #dcdfe6;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}
	
	.radio-button.active {
		border-color: #2979ff;
	}
	
	.radio-inner {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: #2979ff;
	}
	
	/* 多选按钮样式 */
	.checkbox-button {
		width: 36rpx;
		height: 36rpx;
		border-radius: 6rpx;
		border: 2rpx solid #dcdfe6;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}
	
	.checkbox-button.active {
		background-color: #2979ff;
		border-color: #2979ff;
	}
	
	.checkbox-inner {
		color: #ffffff;
		font-size: 24rpx;
		transform: scale(0.8);
	}
	
	/* 评分题样式 */
	.question-rating {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.star-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.star {
		margin: 0 15rpx;
		transition: all 0.2s ease;
		transform: scale(1);
	}
	
	.star-icon {
		font-size: 60rpx;
		color: #dcdfe6;
		transition: color 0.3s ease;
	}
	
	.star.active .star-icon {
		color: #ff9900;
	}
	
	.star:active {
		transform: scale(1.2);
	}
	
	.rating-text {
		text-align: center;
		font-size: 28rpx;
		color: #606266;
		margin-top: 20rpx;
	}
	
	/* 提交按钮样式 */
	.submit-button {
		background: linear-gradient(to right, #2979ff, #56b3ff);
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx 0;
		box-shadow: 0 10rpx 20rpx rgba(41, 121, 255, 0.2);
		transition: all 0.3s ease;
	}
	
	.submit-button text {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.submit-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 10rpx rgba(41, 121, 255, 0.2);
	}
	
	.button-disabled {
		background: linear-gradient(to right, #a0cfff, #c2dfff);
		box-shadow: none;
	}
	
	.footer {
		margin-top: auto;
		padding: 60rpx 0 20rpx;
		text-align: center;
	}
	
	.footer-text {
		font-size: 24rpx;
		color: #c0c4cc;
	}

	/* 🔧 认证加载界面样式 - 与list.vue保持一致 */
	.auth-loading-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f7f9fc;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		margin: 40rpx;
	}

	.loading-icon-auth {
		margin-bottom: 40rpx;
	}

	.loading-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 16rpx;
		text-align: center;
	}

	.loading-subtitle {
		font-size: 26rpx;
		color: #909399;
		text-align: center;
		line-height: 1.5;
		max-width: 400rpx;
	}

	.loading-footer {
		margin-top: auto;
		padding: 40rpx 0 20rpx;
	}
</style>